<template>
  <div v-loading="loading" element-loading-text="加载中..." class="finish_field">
    <div class="header">
      <AssociateSettlementTemplate
        :order-module-id="(route.params.id as string)"
        @updated="getList"
      >
        <HPlainButton> 关联结单模版 </HPlainButton>
      </AssociateSettlementTemplate>
      <div class="search">
        <el-input
          v-model.trim="name"
          placeholder="名称搜索"
          clearable
          @keyup.enter="getList"
          @clear="getList"
        />
        <HButton type="primary" @click="getList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table">
      <el-table border stripe resizable :data="tableData" height="100%">
        <el-table-column
          show-overflow-tooltip
          type="index"
          :index="indexMethod"
          label="序号"
          width="60"
          fixed="left"
          :align="'center'"
        />
        <el-table-column show-overflow-tooltip prop="name" label="字段名称" width="150" />
        <el-table-column show-overflow-tooltip label="字段类型" width="75">
          <template #default="scope">
            <span v-for="item in field_type" v-show="scope.row.type == item.val" :key="item.val">{{
              item.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="content" label="字段内容" min-width="150" />
        <el-table-column show-overflow-tooltip prop="template" label="所属模版" width="150" />
        <el-table-column show-overflow-tooltip prop="required" label="是否必填" width="80">
          <template #default="scope">
            <span v-if="scope.row.required">必填</span>
            <span v-if="!scope.row.required">选填</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="pagination"
        :list_total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { Search } from '@element-plus/icons-vue'
  import { getModuleField } from '@/api/basic'
  import AssociateSettlementTemplate from '@/components/pages/param-set/ordet-set/module-detail/associate-settlement-template/AssociateSettlementTemplate.vue'

  const route = useRoute()
  const loading = ref(false)
  const name = ref('') // 名称
  const tableData = ref([]) // 列表数据
  const pagination = ref() // 分页dom
  const total = ref(0) // 总数目
  const field_type = ref([
    { name: '文本', val: 1 },
    { name: '多行文本', val: 2 },
    { name: '单选', val: 3 },
    { name: '多选', val: 4 },
    { name: '多图', val: 5 },
    { name: '附件', val: 6 },
    { name: '视频', val: 7 },
    { name: '评分', val: 8 },
  ])

  // 列表序号
  const indexMethod = (index: number) => {
    return index + 1
  }

  // 获取列表数据
  const getList = async () => {
    const data = {
      limit: pagination.value.size,
      name: name.value,
      page: pagination.value.current,
    }
    loading.value = true
    await getModuleField(data, route.params.id).then((res) => {
      tableData.value = res.data.data.rows
      total.value = parseInt(res.data.data.total)
    })
    loading.value = false
  }

  defineExpose({ getList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
